<template>
  <!-- 商品类指标 -->
  <!-- <dv-loading v-if="loading" style="height: 800px">Loading...</dv-loading> -->
  <div style="padding:20px">
    <el-card class="box-card">
      <div style="color:#666;font-size:20px;">
        <span style="text-align: center;display:block;">
          <i class="el-icon-sell" style="margin-right: 5px" />
          销售类指标
          <el-date-picker
            v-model="timeFilter"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          />
          <el-button type="primary" style="margin-left:10px" @click="timeQuery">查询</el-button>
        </span>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display:block;text-align: center;">
        <span style="font-weight: bold;color: #666;font-size: 15px;">总体数据</span>
      </div>
      <div>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">用户数：{{ data.totalData.user }}个</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">完成订单数：{{ data.totalData.order }}次</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">已售出图书：{{ data.totalData.sold }}本</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">平均支付时长：{{ data.totalData.payTime }}</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">已支付：{{ data.totalData.pay }}￥</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">图书库存：{{ data.totalData.stock }}本</div>
          </el-card>
        </el-col>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display:block;text-align: center;">
        <span style="font-weight: bold;color: #666;font-size: 15px;">下单类指标</span>
      </div>
      <el-col :xs="24" :sm="24" :md="12" :lg="20" :xl="20" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #666;font-size: 15px">下单数-下单金额-图书数量变化</span>
          </div>
          <div>
            <lineChart1 :chart-data="data.chart1" />
          </div>
        </el-card>
      </el-col>
      <div>
        <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4" style="margin-bottom: 10px">
          <div class="title">浏览-下单转化率</div>
          <el-tooltip placement="top-end">
            <div slot="content" style="font-size: 12px;">
              <div style="padding: 3px;">
                网上书城
              </div>
              <div style="padding: 3px">
                下单数:{{ data.rate.clickToOrderRate[0].pay }}
              </div>
              <div style="padding: 3px">
                浏览数:{{ data.rate.clickToOrderRate[0].totalOrder }}
              </div>
            </div>
            <div class="content">
              <el-progress type="circle" :percentage="parseFloat(data.rate.clickToOrderRate[0].rate)" />
            </div>
          </el-tooltip>
          <div class="footer">下单数 / 浏览数</div>
        </el-col>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display:block;text-align: center;">
        <span style="font-weight: bold;color: #666;font-size: 15px;">交易类指标</span>
      </div>
      <el-col :xs="24" :sm="24" :md="12" :lg="20" :xl="20" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #666;font-size: 15px">交易成功数-金额数-商品数-买家数变化</span>
          </div>
          <div>
            <lineChart :chart-data="data.chart2" :user-num="data.totalData.user" />
          </div>
        </el-card>
      </el-col>
      <div>
        <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4" style="margin-bottom: 10px">
          <div class="title">下单-支付转化率</div>
          <el-tooltip placement="top-end">
            <div slot="content" style="font-size: 12px;">
              <div style="padding: 3px;">
                网上书城
              </div>
              <div style="padding: 3px">
                下单数:{{ data.rate.orderToPayRate[0].totalOrder }}
              </div>
              <div style="padding: 3px">
                支付数:{{ data.rate.orderToPayRate[0].pay }}
              </div>
            </div>
            <div class="content">
              <el-progress type="circle" :percentage="parseFloat(data.rate.orderToPayRate[0].rate)" />
            </div>
          </el-tooltip>
          <div class="footer">支付数 / 下单数</div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4" style="margin-bottom: 10px">
          <el-card>
            <div class="title">平均支付时长：{{ data.totalData.payTime }}</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="20" :xl="20" style="margin-bottom: 10px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;color: #666;font-size: 15px">交易失败数-金额数-商品数-买家数变化</span>
            </div>
            <div>
              <lineChart :chart-data="data.chart3" :user-num="data.totalData.user" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4" style="margin-bottom: 10px">
          <div class="title">下单-取消转化率</div>
          <el-tooltip placement="top-end">
            <div slot="content" style="font-size: 12px;">
              <div style="padding: 3px;">
                网上书城
              </div>
              <div style="padding: 3px">
                取消数:{{ data.rate.orderToCancelRate[0].pay }}
              </div>
              <div style="padding: 3px">
                下单数:{{ data.rate.orderToCancelRate[0].totalOrder }}
              </div>
            </div>
            <div class="content">
              <el-progress type="circle" :percentage="parseFloat(data.rate.orderToCancelRate[0].rate)" />
            </div>
          </el-tooltip>
          <div class="footer">取消数 / 下单数</div>
        </el-col>
      </div>
    </el-card>
  </div>
</template>

<script>
import LineChart from '@/components/Echarts/LineChartForSales'
import LineChart1 from '@/components/Echarts/LineChartForSalesChart1'
import { getOrderInfo } from '@/api/data.js'

export default {
  name: 'BookAnalysis',
  components: {
    LineChart,
    LineChart1
  },
  data() {
    return {
      data: {
        'totalData': {
          'user': 0,
          'stock': 0,
          'order': 0,
          'sold': 0,
          'payTime': '30min',
          'pay': 0
        },
        'rate': {
          'clickToOrderRate': [
            {
              'rate': 0.00,
              'totalOrder': 0,
              'pay': 0
            }
          ],
          'orderToPayRate': [
            {
              'rate': 0.00,
              'totalOrder': 0,
              'pay': 0
            }
          ],
          'orderToCancelRate': [
            {
              'rate': 0.00,
              'totalOrder': 0,
              'pay': 0
            }
          ]
        },
        'chart1': {
          'ordered': [],
          'orderPrice': [],
          'orderNum': []
        },
        'chart2': {
          'tradeFinished': [],
          'tradePrice': [],
          'tradeNum': []
        },
        'chart3': {
          'tradeFinished': [],
          'tradePrice': [],
          'tradeNum': []
        }
      },
      timeFilter: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      count: 0,
      loading: false,
      memoryInfo: {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 20
        },
        series: [{
          data: [],
          type: 'line',
          areaStyle: {
            normal: {
              color: 'rgb(32, 160, 255)' // 改变区域颜色
            }
          },
          itemStyle: {
            normal: {
              color: '#6fbae1',
              lineStyle: {
                color: '#6fbae1' // 改变折线颜色
              }
            }
          }
        }]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getOrderInfo().then(data => {
        this.data = data
        this.loading = false
      })
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    timeQuery() {
      getOrderInfo(this.timeFilter[0], this.timeFilter[1]).then(data => {
        this.data = data
        this.loading = false
        this.$message({
          message: '查询成功',
          type: 'success'
        })
      }).catch(err => {
        this.$message.warning(err)
        this.timeFilter = ''
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box-card {
    margin-bottom: 5px;
    span {
      margin-right: 28px;
    }
    .el-icon-refresh {
      margin-right: 10px;
      float: right;
      cursor:pointer;
    }
  }
  .cpu, .memory, .swap, .disk  {
    width: 20%;
    float: left;
    padding-bottom: 20px;
    margin-right: 5%;
  }
  .title, .footer {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #999;
    height: 25px;
    line-height: 25px;
  }
  .content {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>
